<template>
    <el-dialog
        :title="title"
        append-to-body
        destroy-on-close
        :model-value="showDialog"
        @close="closeDialog()"
    >
        <!-- 表单 -->
        <el-form
            :model="form"
            ref="formRef"
            :rules="rules"
            :inline="false"
            label-width="120px"
        >
            <el-form-item label="权限路径" prop="url" show-overflow-tooltip>
                <el-select
                    v-model="url"
                    placeholder="权限路径"
                    filterable
                    @change="(val) => chooseUrl(val)"
                >
                    <el-option
                        v-for="item in permissionUrlList"
                        :key="item.id"
                        :label="item.url"
                        :value="item.url"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="权限方法" prop="method" show-overflow-tooltip>
                <el-select v-model="method" placeholder="权限方法" filterable>
                    <el-option
                        v-for="item in permissionMethodList"
                        :key="item.id"
                        :label="item.method"
                        :value="item.method"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <template v-slot:footer>
            <span>
                <el-button @click="closeDialog()">取消</el-button>
                <el-button type="primary" @click="onSubmit()">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import {
    reactive,
    ref,
    toRefs,
    defineProps,
    defineEmits,
    onMounted,
} from "vue";

const props = defineProps({
    showDialog: {
        type: Boolean,
        default: true,
    },
    title: {
        type: String,
        default: "添加",
    },
    rowData: {
        type: Object,
        default: null,
    },
});
const emit = defineEmits(["closeDialog"]);
const { title, rowData } = toRefs(props);
const closeDialog = () => {
    emit("closeDialog", false);
};

// const form = reactive({
//   url: "",
//   username: "",
//   password: "",
//   isDefault: false,
// });
const form = reactive({
    createTime: "",
    id: "",
    isDeleted: "",
    method: "",
    url: "",
    zoneId: "",
});
// const { url, username, password, isDefault } = toRefs(form);
const { createTime, id, isDeleted, method, url, zoneId } = toRefs(form);
const formRef = ref(null);

const permissionList = ref([]);
const permissionUrlList = ref([]);
const permissionMethodList = ref([]);

const rules = {
    method: [
        {
            required: true,
            message: "请输入权限方法",
            trigger: "blur",
        },
    ],
    url: [
        {
            required: true,
            message: "请输入权限路径",
            trigger: "blur",
        },
    ],
};

/**
 * @description: 数据初始化
 * @param {*}
 * @return {*}
 * rowData.value &&
 *     (
 *         (url.value = rowData.value.url),
 *     (username.value = rowData.value.username),
 *     (password.value = rowData.value.password),
 *     (isDefault.value = rowData.value.isDefault)
 *     );
 */
rowData.value &&
    ((createTime.value = rowData.value.createTime),
    (id.value = rowData.value.id),
    (isDeleted.value = rowData.value.isDeleted),
    (method.value = rowData.value.method),
    (url.value = rowData.value.url),
    (zoneId.value = rowData.value.zoneId));
/**
 * @description:提交
 * @param {*}
 * @return {*}
 */
const onSubmit = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            let res;
            if (title.value === "添加") {
                res = await VE_API.SysPermissionApi.sysPermissionStory(form);
            } else {
                res = await VE_API.SysPermissionApi.sysPermissionStory({
                    id: rowData.value.id,
                    ...form,
                });
            }
            const { code } = res;
            if (code === 0) {
                closeDialog();
            }
        } else {
            console.log("error submit!!");
            return false;
        }
    });
};
const chooseUrl = (url) => {
    console.log(url);
    permissionMethodList.value = permissionUrlList.value.filter((item) => {
        return (item.url = url);
    });
};
/**
 * @description: 获取列表数据
 * @param {*}
 * @return {*}
 */
const getDataList = async () => {
    const { code, data } =
        await VE_API.SysPermissionApi.sysPermissionFindScanPermission();
    if (code === 0) {
        permissionList.value = data;
        permissionUrlList.value = data;
    }
};
onMounted(async () => {
    await getDataList();
});
</script>

<style lang="scss">
.fl {
    float: left;
}

.p0 {
    padding: 0 !important;
}

.role_edit_item {
    width: 100%;
}
</style>
